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The original browser was once the 
dominant browser in terms of usage 
share, but as a result of the first 
browser war, it lost virtually all of its 
share to Internet Explorer. 


Netscapewas discontinued and 
support for all Netscape browsers and 
client products was terminated on 
March 1, 2008. 
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HTML 


COMPONENTS OF EJ E 


A WEBSITE 


What will be be learning ‘Js 


, aan 
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FROM: W3.0RG 


World Wide Web 


The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a 
large universe of documents. 


Everything there is online about W3 is linked directly or indirectly to this document, including an executive summary of 
the project, Mailing lists , Policy , November's W3 news , Frequently Asked Questions . 


What's out there? 
Pointers to the world's online information, subjects , W3 servers, etc. 


on the browser you are using 


A list of W3 project components and their current state. (e.g. Line Mode X11 Viola , NeXTStep , Servers , Tools , 
Mail robot , Library ) 


Details of protocols, formats, program internals etc 
Paper documentation on W3 and references. 


A list of some people involved in the project. 


History 
A summary of the history of the project. 
How c ? 


If you would like to support the web.. 
Getting the code by anonymous FTP , etc. 
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‘Done omy, 
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Welcome to Microsoft's World Wide Web 
Server! 


Where do you want to go today? 


If your browser doesn't support images, we have a text menu as well 


WWW MICROSOFT. COM is running Microsoft's Windows NT Server 3.5 and EMWAC's 
HTTPS 
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Todays News More Yahoos 


1998 Winter ae MegaMarketing Academy Award 
results, schedules, news BENEFITS EXPOSED! Nominations 


Search options 
Yahoo! Chat with Wall Street guru Jim Cramer, supermodel Frederique 


yf "Shopping - Yahoo! - N he ews - Pee Wether - Stock Gustes - -more.. 
* e Arts and Humanities e News and Media [Xtra!] 
Architecture, Photography, Literature... Current Events, Magazines, TV, Newspapers... 


e Business and Economy [Xtra!] e Recreation and Sports [Xtra!] 
Companies, Finance, Employment... Sports, Games, Travel, Autos, Outdoors... 


e Computers and Internet [Xtra!] e Reference 


Internet, WWW, Software, Multimedia... Libraries, Dictionaries, Phone Numbers... 
e Education e Regional 
Universities, K-12, College Entrance... Countries, Regions, U.S. States... 
fl i M L e Entertainment [Xtra!] e Science 
Cool Links, Movies, Music, Humor... CS, Biology, Astronomy, Engineering... 


e Government e Social Science 
Military, Politics [Xtra!], Law, Taxes... Anthropology, Sociology, Economics... 
e Health [Xtra!] e Society and Culture 
Medicine, Drugs, Diseases, Fitness... People, Environment, Religion... 
What's New - Weekly Picks - Today's Web Events - Yahoo! Internet Life 
Yahooligans! for Kids - Visa Shopping Guide - Yahoo! Style - 3D Stock Viewer 
World Yahoos Australia & NZ - Canada - Denmark - France - Germany - Japan - Korea 


Norway - SE Asia - Sweden - UK & Ireland 
Yahoo! Metros Atlanta - Austin - Boston - Chicago - Dallas / Fort Worth - Los Angeles 
Get Local Miami - Minneapolis / St. Paul - New York - S.F. Bay - Seattle - Wash D.C. 


Smart Shopping with [Visa 


How to Suggest a Site - Company Info - Openings at Yahoo! - Contributors - Yahoo! How-To 


CREATED IN JUST 10 
DAYS 


=, 
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Java Javascript 
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-p Thisisa Paragraph. p_ 


Paragraph 


Content 
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Opening tag closing tag 


Content 


-p This is a Paragraph. nS 
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<- siblings —> 
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div Content div 


<div> 


<hl> <p> 


=, 
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div hi Title hl_ div 


another element! 
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div 
hl Title 
div 


al 


div- 

hl Title hl 

-p Paragraph. p_ 
<f-\\\> 
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HIML syntax The purpose of this problem set 


is to help you practice writing 
Pro bie m HTML. We want you to build 


confidence and master basic 


Statement 1 HTML syntax. 


Discussion Points 
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Helpful 
Resources 


if you get stuck there is no harm in going 
back and watching any of these videos. 
We encourage you to use outside 
resources as well. You can always refer to 
the MDN references or your favourite 
search engine to get unstuck. 


Books and Apps 
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Make a Button !!! 


For this problem statement you have to do is type 
out the HTML to create a button element 


This is a Button 


, Ba? 


Click Here!! 
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ie 
Check all the 


Headings !!! 


For this problem statement, you have to do is type out 
the HTML to create all the different types of headings. 


This is Heading 1 


This is Heading 2 
This is Heading 3 

This is Heading 4 

This is Heading 5 


This is Heading 6 
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Make a List !!! 


For this problem statement, you have to do is type 
out the HTML to create an unordered list. 
e This is an example of an unordered list 
e You have to make an unordered listof 3 web 
languages 
e HTML, CSS and Js 


DevTownl Shaurya Sinha 1O 
Tree to HIML !!! 


Convert the following Tree to HTML code 


Content 


Content Content 
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Make a Hyperlink !! 


For this problem statement, you have to do is type out 
the HTML to create a Hyperlink. 


, aa 
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Mockup to website !!! 


For this problem statement, you have to do is type out 
the HTML to create this following mockup. 


, Ba 


List of Highest Paid Jobs in 2021 


By- Shaurya Sinha 


April 22, 2021 


This is the list of the highest paid jobs in the IT field in 2021. 


e Data Analyst 
e Full Stack Web Developer 
e Software Development Engineer 
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»APP 1 


text-align: center; 


} 


.App-logo { 


animation: App-logo-spin infinite 2s (or 


height: 8px; 
} 


.App-header { 
background-color: 


height: 150px; 
ding: 20px; 
color: Mwhite; 


} 


“App-title { 
font-size: 1.5em; 


0#222; 


=, 
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selector 


Ruleset 


div, 


text-align: right ; 


Declaration 
Block 
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H1 to green !!! 


For this problem statement, you have to do is type out 
the CSS to change Title to Green. 
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attribute selector 


book-summary { 
text-align: right 


i 


Efi attribute selector 


#site-description { 
text-align: right 


i 
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Developer 
Tools 


Lets explore the web page 


di 


centimeters meters 


centimeters 
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RELATIVE 


“ 


=, 
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b0ok-summary { 
width: 400px ; 


site-description { 
width: 40% ; 
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DX 


In 


mM 
mM 


Cin) 


A 
em 
VW 


vh 
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CSS 
Relative 
Units 


10 


em 


Relative to the font-size of the element 
(2em means 2 times the size of the 
current font) 


vh 


Relative to 1% of the height of the 
viewportx 


VW 


Relative to 1% of the width of the 
viewport* 


% 


Relative to the parent element 
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px 


CSS pixels (1px = 1/96th of 1in) 
Absolute 
Units _ 


Centimetres 


10 


Inches (1in = 96px = 2.54cm) 


mm 


Millimetre 


CSS Units !! 


For this problem statement, you have to do is type 
Out Ine SSs tO enange: 

e width to l00px 

e height to 200px 

e font-size to 4em 
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CSS color 


Discussion Points — ————— >) 
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Let's Style an Image 


For this problem statement, you have to do Is type out 
the CSS to change. 

- add a border 

¢ cursor change 

- box shadow 


Let's Style a Font 


For this problem statement, you have to do is type out 
the CSS to change. 

- font-family to Helvetica or Arial or sans-serif 

- font-size to 60px 

- to uppercase 

¢ underline the text 

- change the color to RGB 19, 11, 230. 


Let's Style a Page 


For this problem statement, you have to do is type out 
the CSS to change. 


Chicken Clay Pot Chicken Clay 


Crispy rice baked in clay pot topped with chicken and vegetables Crispy rice baked in clay pot topped with chicken and vegetables 


Let's Style a Page 


For this problem statement, you have to do is type out 
the CSS to change. 


My To-Do List 


Chores 


o sweep-the-garage 


Homework 


Party 


My To-Do List 


Chores 


load the diswasher 
vacuum living room 
take out garbage 


Homework 


study for Programming midterm :P 
finish Project 0 on ShapeAl 


read first two chapters of The Art of War 


Party 


> reserve party room at restaurant 
> order the cake! 


Stylesheet 


What if you wanted to use 
the same CSS on more than 
one webpage 
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IN JAIPUR 
60 IPS OFFICIALS 


Shara. currently 
CO Garpaper City Sawa 
Machopur rectaces tem. 
Asi Korma Abey. ACP 
Trattc Eat has beer aidted 
to Asses tant Commandant of 
fourth Batabon at AAC 


STATE GOVT GIVES 
NOD TO EBC QUOTA 


daiger, Size goverment 
thant a Not hcathon regarding 
economic backward class 


oe 


[Ves ONO) Can't say 
Go pow Teeter turtie 
(tema bok tee (ORAP SE ed oe 


Will act if given 
proof, says Khan; 
MEA reminds him 
of 26/11 dossier 


oreey ieee et 


New Dbotiad: [sides ont Threnelay 
Giemiseed Pakietan! Prime 
Missister imran Kivatt's state 
ent ae a “hare exction” fla 
attering to liwestigate if 
given proof”, the robe of Pa 
kistur been terror group 
Jaisho Mohammed in the 
Pabvuma attack that killed 20 
wohdiors 

tna streng)y werled state 
tent, the Ministry of Exter 
nal Affairs asked Khan to 

vtop misieading the wortd 

and tuke “crmilitte and viel 
be action” ageinat terror 
imastenminds cperuting fro 
Pakistan's soil. fn a televised! 
edeirees Kohut said Inlomaten! 
will take action © New Deth 
shares actionable evidence 
of last week's exicide 
bemting m Kashewis, in 
the same breath, be 
hekd oti « wor tting. aay 
ing his comntry will re 


taliate to « provecsthon WION 


The MEA hit out at 
Khan, saying he has ignewn! 
So's Gains, 18 well a8 by the 
terroria eho bhew up himertf 
"These should be suffietent 
proof for Pak isten te take ac 
thom,” read MEA\s stateement 
it alow nated! that Kham huss so 
far neither condemned nor 
onmdoled (he terror diribe 


10,604.35 Nv 36.60 


Centre trashes Pak PM’s 


xcuse on Pulwama 


TOUGH MESSAGE FROM ARMY, GOVT 


FORCES PROMISE STRICT ACTION ON GROUND, GOVERNMENT ON DIPLOMATIC SPHERE 


rn --- 


= 


Veet scores of yous lined Lo at am Army recwstnort camo in 
Garey on Turecoy eerxéng af a ctong tessage & terror erent 


a I request all Kastument mothers to tell their sons, 
who have joined terrorinm to surrender ane yet 
hack to the mainsteeum, Anyone who will pick wp gun in 
Kashmir will be cieninated untess he surrenders. 


given after the SV 11 Mambal 
attack and terror str ihe at the 
Pathankot uirhase, MEA said 
promises of “guarentewd ac 
than” ring hollow given th 
track reeord of Paki 
stant. It eakedd Pak tetany 
testup feeding the wortd 
obout ite flat seainet 
terror 

Pourer Minister 
Moun Deltbey G0) abort 
Khun. “In the past evielerw 
when im nelation to 26/11, both 
evilemer und totedliggner wae 
given, ee Kino the fete. Ht is 
&wrerary @arrect ~ 

VW bonen en Bade eteatetreenat dee 
tried to distance himaclf 
from past actions of Paki 
stan @eernments, kent 


We demand 
Pakistan te 
stop misteacing the 
international comunity 
and tike credible action 
against the perpetrators 
of Pulwame attack 
MEA statement 


I you hawe any 

actionahie 
intelligence that a 
Pakistani ts involved. 
Give it tows, | gpeeriiitioe 
you we will take action 
imran 


‘Pak army involvement 


100%, JeM 


ees se oh 


Srimagur: Molding Pok ietan 
army and itespy agency IS] 
itireetly respon bbe fur the 
Pulwama terror attack, the 
indianarmy on Tuesday said 
JahheMohaminad in the 
baby of Pakistan) military 
and there ie no dowbe about 
thetr iewolwernent is thn eb 
tuary HM suicide teenbhing 
~Jaish © Mobormmad is the 


is its baby 
isl ) 
stan army and St Jateh has 
adasitted that their chief op 
erations commander hae 
been killed Pakistan army 
invelVereent (tm suicide 
bombing?) & MO per cent, 
said Lieutenant General KIS 
Dhiliin, General Officer 
Commanding, 5 Cerpecd the 
ledian Army 

Forty CRPF sobdiers were 
Killed when a JeM enbcide 
bomber rarnmed his vebicle 
inte a CRPP comroy at Leth 


Pak to carry 
in absence 


ternational Court of 
(C1), beurtng India’s 
release Indian mation 
fhtuehen Jodkay on 
cow in Pakistan jail 
Pakistan's ples for 
jieet to replace ite ad 
Sor bis the world court 
LB Test 
be ern! of sexed day's 
ug. Wkiotant Attorney 
Anwar Manevor 
teyiested to adjourn 
ering ef Mullteus tion 
i till « mew judge from 
antry ie appointed 
© Taeedug Husain 
t- the present ad hoe 
from Pakistan at the 
reportedly had mul 


R.N.1. NO. : RAJENG/2008/24805 


snubs Pak 
Jadhav case 


, 
Kurata Jactye 


HAZY ALLEGATIONS 


@ Webs arpeed that Jatuy 
was senlenced by a mtultary 
Cot © an opaque tual 


fered “curdiec arrest” churtng 
ther beortiie on Moewchay 


Unen 


PILOT DEAD IN 
ID-AIR MISHAP 


wwalortd: An ace pilot of the Indien 
Force (LAF) was killed on Tuorsday 
7 to Hewk treiner jets of the 
rya Kiran eerohatic teem crashed 
tair while rehearsing for the Aero 
la show in Rengatert. The five cay 


shew is 
inesday 


whetuied te begin en 


he deceased pijet hus hewn ibent 
it oe Wing Commander Salkii Gandhi 


ile the injured 


Wing Ceantnamber 


Shethe and Squadron Leader T Sin 

are being truated. Three mumthe 
, Ganidti bad compicted 16 yours of 
triage to tte childhood eewet heart 


BJP seals deal 
with AIADMK 


Chennat: A day afier tt 
up with the Shiv Sena fort 
Lak Sablea polite in Mal 
reshtrn, the KI? an ‘Tred: 
woled « waleharing d& 
with the ALADMK led al 


noance tts deal with the Ce 
gives of Weitiseecdtiy 

The aliance ts for all t 
® sents in Tamil Nade at 
ome in Paducherry While t 
BIP will contest in five, t 
PMK. which eniors suppe 
of the mumoricaily stro 
Vanniyar community 
nerthern and parts of W 
evn Tamil Nadu will conte 
in seven ft will also get o 
iva Sales berth 

ALADMK announced tf 
the BJP and PME wuald « 
port the ALADME in thet 
polls (oT! assemnhly seats 

We have agreed to cont 
the electiogis 04 the state bey 


ture © 


Nerctes after Sa 
Crash, a heort-eerry 
HQ vided cower ged 
m Pe soc! ota 
on ate h cyte 
Can De weer) renter 
1p tee ad Of oem of 
the wpored gat 


ettncam few qt 
The eoace 6) Bee vir 


300px 


215px 


x { i? content 


Box Model Sizing box-sizing: i padding 
Finish the CSS to create this block 1 border—box; vot border 
‘_: Margin 


element's box model. 


.box-model { 
width: 175px; 


Relative Widths 


Given the following HTML and CSS, how wide will the primary and secondary 
elements be when they get rendered to the page? 


.container { 


<div class="container"> width: 1170px; 
<div id="primary">...</div> _—— f 
die RY PrteS/GAN? "width: 66. 66666667%; 
} 


#secondary { 


| | | width: 33.33333333%; 
1 


#5 


#6 


Company Name +Link1 Link 2. Link 3 Link 4+ 


[aa Lesson Title 
Lorem ipsum dolor 


amet, consectetur 


I 


Lesson Title 


Lorem ipsum dolor 


ry 


Profile Name amet, consectetur 


Lorem ipsum dolor sit amet, nisi Lorem ipsum dolor sit amet, nisi 
Lorem ipsum dolor sit 
amet, consectetur 
adipiscing elit, sed do 
eiusmod tempor 
incididunt ut labore 
et dolore magna 


aliqua. 


consectetu laboris nisi uf aliquip consectetu laboris nisi ut aliquip 


ex ea commodo ex ea commodo 


Lesson Title ry ‘Lesson Title! 


> 


Lorem ipsum dolor Lorem ipsum dolor 


amet, consectetur amet, consectetur 


ans sas Ss = @& 
Lorem ipsum dolor sit amet, nisi Lorem ipsum dolor sit amet, nisi 
consectetu laboris nisi ut aliquip consectetu laboris nisi ut aliquip 


ex ea commodo ex ea commodo 


© Copyright 


#1 


#2 


#3 
#4, 
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Ham hock porchetta mollit corned beef 
sed spare ribs aliqua nulla. Mollit ut 
tongue qui adipisicing officia sirloin. 
Turkey boudin tri-tio minim consequat 
pastrami pariatur laborum fugiat nisi 
beef ribs in dolore kielbasa sunt. Id cillum 
aliquip turkey, ball tip cupidatat pastra- 
mi. Meatloaf in fatoack, pariatur ut nulla 
reorehenderit jerky t-bone sirloin incidi- 


= & 
' € 
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Ham hock porchetta mollit corned beef 
sed spare ribs aliqua nulla. Mollit ut 
tongue qui adipisicing officia sirloin. 
Turkey boudin tri-tio minim consequat 
oastrami pariatur laborum fugiat nis! 
beef ribs in dolore kieloasa sunt. Id cillum 
aliquip turkey, ball tip Cupidatat pastra- 
mi. Meatloaf in fatback, pariatur ut nulla 
reorehenaerit jerky t-bone sirloin incidl- 
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What are We 
doing up till 
now? 


CODE 


TEST 


REFINE 
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= > oe 9 HOME SKILLS RECENT CLIENT CONTACT Say Hi! 


BUILD THe BELIEF 


Hello, lam The 
Rock 


Hey, In this video i am gonna show you how to make a responisve personal 
website only using HTML and CSS. 


See My Portfolio 


